"use client";

/**
 * /w/:workspace/favorites — the caller's favorited pages (Phase 3 PR-030).
 *
 * List  → GET    /workspaces/:wid/pages?favorites=true   ({ data: Page[] },
 *            ordered by the favorite's fractional position — currently a
 *            stable (position, pageId) order; the reorder API is not built yet)
 * Unstar→ DELETE /pages/:id/favorite                      (the PageFavorite row
 *            is deleted; the page's isFavorite flag is not the source of
 *            truth — it's only a default)
 *
 * A page trashed AFTER being starred still lists here (its trashedAt is set —
 * we badge it so the link target makes sense).
 */
import { useParams } from "next/navigation";
import Link from "next/link";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Bookmark, BookmarkX, Database as DatabaseIcon, FileText, Loader2 } from "lucide-react";
import { formatRelativeTime } from "@/lib/utils";
import { pageApi } from "@/lib/api";
import { useWorkspace } from "@/hooks/use-workspace";
import { Page } from "@/lib/types";

export default function FavoritesPage() {
  const params = useParams<{ workspace: string }>();
  const slugOrId = params?.workspace ?? "";
  const workspaceSlug = params?.workspace ?? "default";
  const { data: workspace } = useWorkspace(slugOrId);
  const qc = useQueryClient();

  const favorites = useQuery({
    // `["favorites"]` is the prefix useToggleFavorite invalidates (the toolbar
    // star must refresh this list without a full reload).
    queryKey: ["workspaces", workspace?.id ?? slugOrId, "favorites"],
    queryFn: () => pageApi.list(workspace?.id ?? slugOrId, { favorites: true, limit: 200 }),
    enabled: !!workspace?.id,
    retry: false
  });

  const unfavorite = useMutation({
    mutationFn: (pageId: string) => pageApi.removeFavorite(pageId),
    onSuccess: (_data, pageId) => {
      qc.invalidateQueries({ queryKey: ["favorites"] });
      qc.invalidateQueries({ queryKey: ["workspaces", workspace?.id, "favorites"] });
      qc.invalidateQueries({ queryKey: ["pages", pageId] });
    }
  });

  const items = favorites.data ?? [];

  return (
    <div className="mx-auto max-w-2xl px-6 py-8">
      <h1 className="mb-1 flex items-center gap-2 text-xl font-semibold">
        <Bookmark className="size-5 text-muted-foreground" aria-hidden /> Favorites
      </h1>
      <p className="mb-4 text-sm text-muted-foreground">
        Pages you've starred. Star one from a page's toolbar or its context menu.
      </p>

      {favorites.isLoading && (
        <p className="inline-flex items-center gap-2 text-sm text-muted-foreground">
          <Loader2 className="size-4 animate-spin" /> Loading favorites…
        </p>
      )}

      {favorites.isError && (
        <p className="rounded-md border border-dashed border-border p-4 text-sm text-muted-foreground">
          Couldn't load your favorites.
        </p>
      )}

      {!favorites.isLoading && !favorites.isError && items.length === 0 && (
        <p className="rounded-md border border-dashed border-border p-6 text-center text-sm text-muted-foreground">
          No favorites yet. Open a page and click the star in its toolbar (or right-click a
          page in the sidebar → “Add to favorites”).
        </p>
      )}

      <ul className="space-y-1.5">
        {items.map((p: Page) => (
          <li
            key={p.id}
            data-testid={`favorite-item-${p.id}`}
            className="flex items-center gap-2.5 rounded-md border border-border px-3 py-2"
          >
            <Link
              href={`/w/${workspaceSlug}/page/${p.id}`}
              className="flex min-w-0 flex-1 items-center gap-2.5"
            >
              <span className="shrink-0 text-sm" aria-hidden>
                {p.icon || (p.databaseId ? (
                  <DatabaseIcon className="size-4 text-blue-600" />
                ) : (
                  <FileText className="size-4 text-muted-foreground" />
                ))}
              </span>
              <span className="truncate text-sm">{p.title || "Untitled"}</span>
            </Link>
            {p.trashedAt && (
              <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
                In trash
              </span>
            )}
            <span className="shrink-0 text-[11px] text-muted-foreground">
              Updated {formatRelativeTime(p.updatedAt)}
            </span>
            <button
              type="button"
              data-testid={`favorite-remove-${p.id}`}
              className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs text-muted-foreground hover:bg-muted disabled:opacity-50"
              onClick={() => unfavorite.mutate(p.id)}
              disabled={unfavorite.isPending}
              aria-label={`Remove “${p.title || "Untitled"}” from favorites`}
            >
              <BookmarkX className="size-3.5" aria-hidden /> Remove
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}